<template>
	<view>
		<view class="my-bg">
			<view class="centerY pad-30">
				<view class="font-30 color-646464">
					当前登录手机号：{{userInfo?.tel?.replace(/^(\d{3})\d{4}(\d{4})$/, '\$1****\$2')}}</view>
			</view>
			<view class="pad-24">
				<view class="bg-white radius20">
					<up-cell :titleStyle="{'fontSize': '28rpx'}" :rightIconStyle="{'fontSize': '24rpx'}"
						v-for="(item,index) in cellList" :icon="item.icon" :key="index" @click="jumpCell(item.path)"
						:border="false" size="large" :title="item.title" isLink></up-cell>
				</view>
			</view>
		</view>
		<my-popup content="您确定退出吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { baseInfo } from '@/api/user.js';

	let cellList = ref([{
			icon: "/static/image/icon4.png",
			title: "修改登录密码",
			path: "/pages/my_actions/editPassword/editPassword"
		},
		{
			icon: "/static/image/icon7.png",
			title: "缴费记录",
			path: "/pages/my_actions/bill/bill"
		},
		{
			icon: "/static/image/kefu.png",
			title: "联系客服",
			path: "/pages/my_actions/serviceList/serviceList"
		},
		{
			icon: "/static/image/invoiceTitle.png",
			title: "发票抬头",
			path: "/pages/my_actions/invoice/invoice"
		},
		{
			icon: "/static/image/invoice.png",
			title: "申请发票",
			path: "/pages/my_actions/applyInvoice/applyInvoice"
		},
		{
			icon: "/static/image/icon5.png",
			title: "退出登录",
			path: "out"
		},
	])

	// 退出登录
	const isPopup = ref(false);
	const jumpCell = (path) => {
		if (path == 'out') {
			isPopup.value = true;
		} else {
			uni.navigateTo({
				url: path
			})
		}
	}



	// 确认退出
	const hanldeConfirm = () => {
		uni.removeStorageSync('jwt_token');
		uni.removeStorageSync('refresh_token');
		uni.removeStorageSync('userId');
		uni.removeStorageSync('loginStatus');
		uni.reLaunch({
			url: '/pages/home/home'
		})
	}

	// 获取当前登录的账户信息
	const userInfo = ref({});
	onShow(() => {
		baseInfo().then(res => {
			if (res?.code == 200) {
				userInfo.value = res.data.user;
			}
		})
	})
</script>

<style scoped>
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
</style>